<div class="content__title">
    <h1>
        Fullscreen Table
        <small>使用 <a href="//ng-alain.com/components/simple-table" target="_blank">simple-table</a>、<a href="//ng-alain.com/components/full-content" target="_blank">full-content</a> 组合，由于 nz-table 固定表头暂不支持自适应，因此表格的展示的效果在响应式里面效果并不是特别好。</small>
    </h1>
</div>
<full-content (fullscreenChange)="fullChange($event)">
    <nz-card>
        <div nz-row class="mb-md">
            <div nz-col nzSpan="12">
                <form nz-form [nzLayout]="'inline'">
                    <nz-form-item>
                        <nz-form-label nzFor="userid">User ID</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="args.userid" name="userid" id="userid">
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-control>
                            <button nz-button [nzType]="'primary'" (click)="st.load()" [nzLoading]="http.loading">Search</button>
                            <button nz-button (click)="st.load({_allow_anonymous: true})" [disabled]="http.loading">Clear</button>
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </div>
            <div nz-col nzSpan="12">
                <div class="text-right">
                    <nz-dropdown>
                        <button nz-button nz-dropdown>
                            <span>Export</span> <i class="anticon anticon-down"></i>
                        </button>
                        <ul nz-menu>
                            <li nz-menu-item>Excel</li>
                            <li nz-menu-item>JSON</li>
                            <li nz-menu-item>PNG</li>
                        </ul>
                    </nz-dropdown>
                    <button nz-button [nzType]="'default'" full-toggle class="ml-sm">Full</button>
                </div>
            </div>
        </div>
        <simple-table #st
            [data]="url" [extraParams]="args" [resReName]="{list: 'results' }"
            [total]="total" [ps]="ps" [columns]="columns" [scroll]="scroll">
            <ng-template st-row="events" let-item let-index="index">
                <g2-mini-bar height="15" theme="mini" color="#999" borderWidth="3" [padding]="[0, 0, 0, 0]" [data]="events"></g2-mini-bar>
            </ng-template>
        </simple-table>
    </nz-card>
</full-content>
